<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>金奉祥-登录注册</title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
		<script src="../Scripts/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../Scripts/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				font-size: 16px;
				text-decoration: none;
			}
			html, body {
				margin: 0;
				height: 100%;
			}
			body{
				background: linear-gradient(to right, #ffdde1, #ee9ca7, #a7bfe8, #6190e8);
				background-size: 500% 500%;
				transition: background 3s ease;
				background-position: 50% 50%;
				position: relative;
			}
			.Login_Framework{
				position: absolute;
				width: 100%;
				padding-top: 1rem;
				padding-bottom: 1rem;
				border-radius: 1%;
				background-color: #fff;
				box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
				opacity: 0.9;
			}
			.Login_Framework a{
				color: #fff;
			}
			.btn{
				width: 260px;
				color: #fff;
				padding: 15px;
				border-radius: 25px;
				font-size: 20px;
			}
			.btn:hover{
				opacity: 0.3;
				font-weight: bold;
			}
			.btn-register{
				background-color: #ee9ca7;
				margin-bottom: .8em;
			}
			.btn-login{
				background-color: #a7bfe8;
				margin-bottom: .8em;
			}
			.is-login {
				background-position: 100% 50%;
			}
			.is-register{
				background-position: 0% 0%;
			}
			
			.in_register{
				position: absolute;
				top: 50%;
				width: 100%;
				height: auto;
				padding-top: 1rem;
				padding-bottom: 20px;
				border-radius: 1%;
				background-color: #fff;
				box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
				opacity: 0.9;
			}
			.in_register p{
				margin-top: 0;
				margin-bottom: 1rem;
			}
			.badge-wrap a{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40px;
				height: 40px;
				margin: 0.2rem;
				padding: 0;
				opacity: 0.7;
				border-radius: 50%;
				transition: opacity .3s ease-in;
				font-size: 1rem;
				color: #fff;
				text-decoration: none;
				cursor: pointer;
				background-color: #ee9ca7;
			}
			.btn-lgtwo{
				background-color: #ee9ca7;
				border: 2px solid !important;
			}
			.btn-lgtwo:hover{
				background-color: #fff;
				color: #222222;
				font-weight: bold;
				border: 2px solid #ee9ca7;
			}
			.form-controls{
				width: 200px;
				height: 38px;
				padding: 5px;
				border-radius: 5%;
				border: 1px solid #ee9ca7;
				color: #ee9ca7;
				border-color: rgba(238,156,167,.25);
				margin-bottom: 5%;
			}
			.btn_fh{
				width: 50px;
				height: 50px;
				color: #fff !important;
				cursor: pointer;
				background-color: #ee9ca7;
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 0;
				font-size: 1.5rem;
				border: 0;
			}
			.btn_fh2{
				width: 50px;
				height: 50px;
				color: #fff !important;
				cursor: pointer;
				background-color: #BED0EE;
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 0;
				font-size: 1.5rem;
				border: 0;
			}
		</style>
	</head>
	<body>
		<div class="Login_Framework_hide" style="position: relative;top: 25%;margin: 0 auto;max-width: 450px;">
			<div class="Login_Framework text-center">
				<h2>欢迎来到</h2>
				<h3 style="padding-bottom: 10px;">金奉祥登录页面</h3>
				<a class="btn btn-register">注册</a>
				<br>
				<a class="btn btn-login">登录</a>
			</div>
		</div>
		
		
		
		<div class="in_register_hide" style="position: relative;top: 15%;margin: 0 auto;max-width: 450px;display: none;">
			<div class="in_register text-center">
				<div class="btn_fh">
					<i class="glyphicon glyphicon-menu-left" style="margin-top: 25%;font-size: 25px;"></i>
				</div>
				<h2 style="color: #ee9ca7;font-weight: bold;font-size: 30px;">会员注册</h2>
				<p style="font-weight: 400;line-height: 1.5;color: #212529;font-size: 1.9rem;">第三方注册</p>
				<p class="badge-wrap" style="display: flex;justify-content: center;">
					<a href="#" style="">
						<i class="glyphicon glyphicon-apple"></i>
					</a>
					<a href="#">
						<i class="glyphicon glyphicon-adjust"></i>
					</a>
					<a href="#">
						<i class="glyphicon glyphicon-barcode"></i>
					</a>
					<a href="#">
						<i class="glyphicon glyphicon-calendar"></i>
					</a>
				</p>
				<p style="font-size: 1.9rem;">或用您的手机号码注册</p>
				<form>
					<input class="form-controls" type="text" placeholder="名称" style="margin-top: 5%;" />
					<br>
					<input class="form-controls" type="tel" placeholder="手机号码" />
					<br>
					<input class="form-controls" type="password" placeholder="密码" />
					<br>
					<a href="#" class="btn btn-lgtwo">注册</a>
				</form>
			</div>
		</div>
		
		
		<div class="in_Login_hide" style="position: relative;top: 15%;margin: 0 auto;max-width: 450px;display: none;">
			<div class="in_register text-center">
				<div class="btn_fh2">
					<i class="glyphicon glyphicon-menu-left" style="margin-top: 25%;font-size: 25px;"></i>
				</div>
				<h2 style="color: #ee9ca7;font-weight: bold;font-size: 30px;color:#BED0EE;margin-left: 25px;">欢迎登录！</h2>
				<p style="font-weight: 400;line-height: 1.5;color: #212529;font-size: 1.9rem;">第三方登录</p>
				<p class="badge-wrap" style="display: flex;justify-content: center;">
					<a href="#" style="background-color: #BED0EE;">
						<i class="glyphicon glyphicon-apple"></i>
					</a>
					<a href="#" style="background-color: #BED0EE;">
						<i class="glyphicon glyphicon-adjust"></i>
					</a>
					<a href="#" style="background-color: #BED0EE;">
						<i class="glyphicon glyphicon-barcode"></i>
					</a>
					<a href="#" style="background-color: #BED0EE;">
						<i class="glyphicon glyphicon-calendar"></i>
					</a>
				</p>
				
				<p style="font-size: 1.9rem;margin: 15px 0px;">或用手机号码登录</p>
				<form>
					<input class="form-controls" type="tel" placeholder="手机号码" style="border: 2px solid #BED0EE;" />
					<br>
					<input class="form-controls" type="password" placeholder="密码" style="border: 2px solid #BED0EE;" />
					<br>
					<p>
						<a href="#">忘记密码？</a>
					</p>
					<a href="#" class="btn btn-lgtwo btn_lg2" style="background-color: #BED0EE;">登录</a>
				</form>
				
			</div>
		</div>
		
		
		
	</body>
	<script type="text/javascript">
		$(function(){
			$(".btn-register").click(function(){
				$("body").removeClass("is-login");
				$("body").addClass(" is-register");
				$(".Login_Framework_hide").fadeOut(1000);
				$(".in_register_hide").fadeIn(1000);
			})
			$(".btn-login").click(function(){
				$("body").removeClass("is-register");
				$("body").addClass("is-login");
				// $(".Login_Framework_hide").animate({
				// 	opacity:'0.8',
				// 	height:'295px'
				//   });
				$(".Login_Framework_hide").fadeOut(1000);
				$(".in_Login_hide").fadeIn(1000);
			})
			$(".btn_fh").click(function(){
				$("body").removeClass("is-login");
				$("body").removeClass(" is-register");
				$(".in_register_hide").fadeOut(1000);
				$(".Login_Framework_hide").fadeIn(1000);
			})
			$(".btn_fh2").click(function(){
				$("body").removeClass("is-login");
				$("body").removeClass(" is-register");
				$(".in_Login_hide").fadeOut(1000);
				$(".Login_Framework_hide").fadeIn(1000);
			})
		})
	</script>
</html>
